<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="homework2.2.css">
</head>
<body>
    <input type="text" id="myInput" placeholder="搜索公司...">
    <table id="myTable">
        <tr class="header"></tr>
            <th style="width:60%">公司名称</th>
            <th style="width:40%">国家</th>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Berglunds snabbkop</td>
            <td>Sweden</td>
        </tr>
        <tr>
            <td>Island trading</td>
            <td>UK</td>
        </tr>
        <tr>
            <td>Koniglich Essen</td>
            <td>Germany</td>
        </tr>
    </table>
</body>
<script src="homework2.2.js">function search() {
    let input = document.getElementById("myInput");
    let filter = input.value.toUpperCase();
    let table = document.getElementById("myTable");
    let tr = table.querySelectorAll("tr");
    // 循环表格每一行，查找匹配项
     for (let i = 0; i < tr.length; i++) {
    let td = tr[i].querySelectorAll("td")[0]; //获得第一列（公司名称）
     if (td) {
    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
    tr[i].style.display = ""; //恢复元素显示
    } else {
    tr[i].style.display = "none"; //隐藏元素
    } } } }
    let input = document.getElementById("myInput");
    input.addEventListener("input", search);</script>
</html>